<template>
    <view class="address-picker">
        <view class="address-header">
            <text class="cancel-btn" @click="close">取消</text>
            <text class="title">选择地址</text>
            <text class="confirm-btn" @click="confirm">确定</text>
        </view>
        <view class="address-tabs">
            <view 
                v-for="(tab, index) in tabs" 
                :key="index"
                class="tab-item"
                :class="{'active': currentTab === index}"
                @click="switchTab(index)"
            >
                {{tab.name || '请选择'}}
            </view>
        </view>
        <scroll-view class="address-list" scroll-y>
            <view 
                v-for="(item, index) in currentList" 
                :key="index"
                class="address-item"
                :class="{'selected': isSelected(item)}"
                @click="selectItem(item)"
            >
                <text>{{item.name}}</text>
                <text class="check-icon" v-if="isSelected(item)">✓</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: 'AddressPicker',
    data() {
        return {
            tabs: [
                { name: '省份', value: '' },
                { name: '城市', value: '' },
                { name: '区县', value: '' }
            ],
            currentTab: 0,
            provinceList: [],
            cityList: [],
            districtList: [],
            selectedAddress: {
                province: '',
                city: '',
                district: ''
            },
            addressData: null
        }
    },
    computed: {
        currentList() {
            switch(this.currentTab) {
                case 0:
                    return this.provinceList
                case 1:
                    return this.cityList
                case 2:
                    return this.districtList
                default:
                    return []
            }
        }
    },
    created() {
        this.loadAddressData()
    },
    methods: {
        async loadAddressData() {
            try {
                const res = await uni.request({
                    url: '/static/data/address.json'
                })
                this.addressData = res.data
                this.provinceList = this.addressData.provinces
            } catch (e) {
                console.error('加载地址数据失败：', e)
                uni.showToast({
                    title: '加载地址数据失败',
                    icon: 'none'
                })
            }
        },
        getCityList(provinceCode) {
            const province = this.addressData.provinces.find(p => p.code === provinceCode)
            if (province) {
                this.cityList = province.cities
            }
        },
        getDistrictList(cityCode) {
            const province = this.addressData.provinces.find(p => 
                p.cities.some(c => c.code === cityCode)
            )
            if (province) {
                const city = province.cities.find(c => c.code === cityCode)
                if (city) {
                    this.districtList = city.districts
                }
            }
        },
        switchTab(index) {
            if (index < this.currentTab) {
                this.currentTab = index
            }
        },
        async selectItem(item) {
            switch(this.currentTab) {
                case 0:
                    this.selectedAddress.province = item.name
                    this.tabs[0].name = item.name
                    this.tabs[0].value = item.code
                    this.getCityList(item.code)
                    this.currentTab = 1
                    break
                case 1:
                    this.selectedAddress.city = item.name
                    this.tabs[1].name = item.name
                    this.tabs[1].value = item.code
                    this.getDistrictList(item.code)
                    this.currentTab = 2
                    break
                case 2:
                    this.selectedAddress.district = item.name
                    this.tabs[2].name = item.name
                    this.tabs[2].value = item.code
                    break
            }
        },
        isSelected(item) {
            switch(this.currentTab) {
                case 0:
                    return this.selectedAddress.province === item.name
                case 1:
                    return this.selectedAddress.city === item.name
                case 2:
                    return this.selectedAddress.district === item.name
                default:
                    return false
            }
        },
        close() {
            this.$emit('close')
        },
        confirm() {
            if (this.selectedAddress.province && this.selectedAddress.city && this.selectedAddress.district) {
                this.$emit('confirm', this.selectedAddress)
            } else {
                uni.showToast({
                    title: '请选择完整地址',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.address-picker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 30rpx 30rpx 0 0;
    z-index: 1000;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    flex-shrink: 0;

    .cancel-btn {
        color: #666;
        font-size: 28rpx;
    }

    .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
    }

    .confirm-btn {
        color: #ff4d4f;
        font-size: 28rpx;
    }
}

.address-tabs {
    display: flex;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #eee;
    flex-shrink: 0;

    .tab-item {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #666;
        position: relative;
        padding: 10rpx 0;

        &.active {
            color: #ff4d4f;
            font-weight: 500;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                width: 40rpx;
                height: 4rpx;
                background: linear-gradient(45deg, #ff4d4f, #ff7875);
                border-radius: 2rpx;
            }
        }
    }
}

.address-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 30rpx;

    .address-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #eee;
        font-size: 28rpx;
        color: #333;

        &.selected {
            color: #ff4d4f;

            .check-icon {
                color: #ff4d4f;
                font-size: 32rpx;
            }
        }
    }
}
</style> 